<style>
.flip-card,
.flip-card > .content {
  height: 10rem;
  transition: opacity .5s, transform .5s;
}
.flip-card > .content.back {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}
.flip-card:hover {
  transform: rotateY(180deg);
}
.flip-card:hover > .content.front {
  opacity: 0;
}
.flip-card:hover > .content.back {
  opacity: 1;
  transform: rotateY(180deg);
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div class="space">
          <div class="flip-card rounded shadow">
            <div class="front content red flex flex-center">
              <h1 class="text-center">抽奖</h1>
            </div>
            <div class="back content green flex flex-center">
              <h1 class="text-center">欧耶<br>今日你值日</h1>
            </div>
          </div>
        </div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;flip-card rounded shadow&quot;&gt;
  &lt;div class=&quot;front content red flex flex-center&quot;&gt;
    &lt;h1 class=&quot;text-center&quot;&gt;&#x62bd;&#x5956;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class=&quot;back content green flex flex-center&quot;&gt;
    &lt;h1 class=&quot;text-center&quot;&gt;&#x6b27;&#x8036;&lt;br&gt;&#x4eca;&#x65e5;&#x4f60;&#x503c;&#x65e5;&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.flip-card,
.flip-card > .content {
  height: 10rem;
  transition: opacity .5s, transform .5s;
}
.flip-card > .content.back {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}
.flip-card:hover {
  transform: rotateY(180deg);
}
.flip-card:hover > .content.front {
  opacity: 0;
}
.flip-card:hover > .content.back {
  opacity: 1;
  transform: rotateY(180deg);
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
